<template>
  <div id="bottomGuide">
    <el-bottom-guide>
      <ul class="ccui-bottom-button">
        <slot name="start" />
        <li>
          <el-button
            type="bottom"
            icon="icon-ccui-return"
            @click="$emit('handleBack')"
            >返回</el-button
          >
        </li>
        <template v-if="approvalStatus === 'approvaled'">
          <li>
            <el-button
              type="bottom"
              icon="icon-ccui-export"
              @click="handleExport"
              >导出</el-button
            >
          </li>
          <template v-if="busiType">
            <li>
              <el-button
                type="bottom"
                icon="icon-ccui-export"
                @click="autographExport"
                >签名导出</el-button
              >
            </li>
            <li>
              <el-button
                type="bottom"
                icon="icon-ccui-export"
                @click="autograph"
                >签名</el-button
              >
            </li>
          </template>
        </template>

        <slot name="end" />
      </ul>
    </el-bottom-guide>

    <exportQr ref="exportQr" type="edit" @ok="autographExport" />
  </div>
</template>

<script>
import { getSessionItem } from "@/basa/utils";
import { smpPdfExport, detailExport } from "@/basa/api";
import { exportData } from "@/basa/utils/public";
import exportQr from "./exportQr";

export default {
  name: "bottomGuide",
  components: { exportQr },
  props: {
    // 详情 id
    curPageId: {
      type: [Number, String]
    },
    // 审批状态
    approvalStatus: {
      type: String,
      default: ""
    },
    // 页面类型
    pageType: {
      type: String,
      default: ""
    },
    // 导出方法
    exportMethod: {
      type: String,
      default: "post"
    },
    // 导出方法为 get 时候的页面类型
    methodGetPageType: {
      type: String,
      default: ""
    },
    // pdf 导出类型
    busiType: {
      type: String,
      default: ""
    }
  },
  methods: {
    autograph() {
      const createUserId = getSessionItem("userInfo").openId;
      this.$refs.exportQr.queryAutograph({ createUserId });
    },
    // 导出
    async handleExport() {
      if (this.exportMethod === "get") {
        let openUrl = document.createElement("a");
        openUrl.style.display = "none";
        openUrl.href = `${this.$addUrlPerFix(
          process.env.VUE_APP_BASE_URL
        )}/apis/smp/export/${this.methodGetPageType}?priId=${this.curPageId}`;
        openUrl.setAttribute("rel", "noopener noreferrer");
        openUrl.download;
        document.body.appendChild(openUrl);
        openUrl.click();
        document.body.removeChild(openUrl);
      } else {
        const data = {
          id: this.curPageId,
          type: this.pageType
        };
        exportData(await detailExport(data));
      }
    },

    // 签名导出
    async autographExport() {
      const obj = {
        id: this.curPageId,
        busiType: this.busiType
      };
      // 获取
      const { ossUrl, fileName } = (await smpPdfExport(obj)).data.data;
      // 组合
      const fileData = { ossUrl, fileName };
      // 下载
      exportData(fileData);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
